<iframe src="http://localhost/ngApp/#/project" ng-style="{width: iframe.width + 'px', height: iframe.height + 'px'}" ng-controller="Frame"></iframe>
<div id="mask"></div>
<div class="panel fix right v-max hasMenu"
	 id="OC"
	 ng-hide="isCapturing"
	 ng-controller="MainInterface"
	 ng-class="isPanelActive()">
	<div class="title">{{title()}}
		<div class="menu right sub" ng-controller="MainMenu">菜单
			<ul class="main">
				<li class="sub">新建
					<ul>
						<li id="test-script">测试脚本</li>
<!--
						<li>监控项目</li>
						<li>接口测试</li>
-->
					</ul>
				</li>
				<li><a href="#/panel/process">新建测试</a>
				</li>
				<li class="sub">打开
					<ul>
<!--
						<li>当前报告</li>
						<li class="hr">本地存储</li>
-->
						<li class="sub">云存储
							<ul>
								<li>测试脚本</li>
								<li>测试任务</li>
							</ul>
						</li>
					</ul>
				</li>
<!--
				<li>存储在本地</li>
				<li class="hr">同步到云</li>
				<li class="sub">语言
					<ul>
						<li id="zh_CN" class="lang">简体中文</li>
						<li id="en_US" class="lang">English</li>
					</ul>
				</li>
				<li class="sub">主题
					<ul>
						<li>主题1</li>
						<li>主题2</li>
					</ul>
				</li>
				<li id="config" class="hr">配置</li>
-->
				<li>帮助</li>
				<li><a href="#/panel/about">关于</a></li>
			</ul>
		</div>
	</div>

	<div class="grid-container">
		<div class="grid grid-flexible align-bottom" id="location">
			<div class="col h-max">
				<input type="text"
					placeholder=""
					class="left"
					ng-readonly="isReadonly"
					ng-model="iframe_href"
					ng-click="modifyLocation()"
					ng-blur="fixLocation()"
					ng-keypress="gotoLocation($event)"
					id="location"/>
			</div>
			<div class="col col-minimal">
				<a class="button primary ico goto" id="goto" title="跳转" ng-click="gotoLocation($event)"></a>
			</div>
			<div class="col col-minimal">
				<a class="button success ico refresh" title="刷新" ng-click="refreshIframe()"></a>
			</div>
		</div>
	</div>
	<hr>

	<div id="toolbar" class="row" ng-controller="ToolBar">
		<ul class="toolbar left">
			<li>
				<a class="button primary ico new"
					title="新建过程"
					href="#/panel/process/add"
					ng-disabled="isPlaying()"></a>
			</li>
			<li ng-if="hasHEAD()">
				<a class="button success ico edit"
					title="编辑过程"
					href="#/panel/process/modify"
					ng-disabled="isPlaying()"></a>
			</li>
			<li>
				<a class="button primary ico open"
					title="打开"
					href="#/panel/open"
					ng-disabled="isPlaying()"></a>
			</li>
			<li class="button primary ico save"
				title="保存"
				ng-if="hasHEAD()"
				ng-click="save()"
				ng-disabled="isPlaying()"></li>
			<li class="hr" ng-if="hasHEAD()"></li>
			<li ng-if="hasHEAD()">
				<a class="button success ico add"
				 	title="增加步骤"
					href="#/panel/step/add/"
					ng-disabled="isPlaying()"></a>
			</li>
			<li class="button secondary ico check"
				title="检查"
				ng-if="hasHEAD()"
				ng-disabled="isPlaying()"></li>
			<li class="hr"></li>
			<li class="button secondary ico highlight-text"
				id="hightlight"
				title="打开高亮"
				ng-disabled="isPlaying()"></li>
		</ul>
		<ul class="toolbar right">
			<li class="button alert ico trash"
				id="trash" title="销毁"
				ng-click="destroyProgram()"
				ng-if="hasHEAD()"
				ng-disabled="isPlaying()"></li>
		</ul>
	</div>
	<hr>

	<div ng-if="!hasHEAD()">
		请创建一个测试过程
	</div>
	<table class="sticky" ng-if="hasHEAD()">
		<thead>
		<tr>
			<th style="width:2.5em;">#</th>
			<th>步骤名称</th>
			<th style="width:36px">操作</th>
			<th style="width:1px">&nbsp;</th>
		</tr>
		</thead>
	</table>
	<div id="view" class="scrollable" ng-if="hasHEAD()">
		<table>
			<tbody>
				<tr style="border: none">
					<td style="width:2.5em; padding: 0 .5em;"></td>
					<td style="width: 314px; padding: 0 .5em;"></td>
					<td style="width:39px; padding: 0 .5em;"></td>
				</tr>
				<tr ng-repeat="step in steps"
					context-menu
					data-target="edit-menu-{{$index}}"
					ng-class="{delay: step.type==='DelayStep',
						event: step.type==='EventStep',
						cur: counter===$index&&(isPlaying||isDebuging)}">
					<td>{{$index + 1}}</td>
					<td>
						<ul id="edit-menu-{{$index}}" class="context menu">
							<li id="insert-up"><a ng-href="#/panel/step/add/{{$index}}">向上插入</a></li>
							<li id="insert-down"><a ng-href="#/panel/step/add/{{$index+1}}">向下插入</a></li>
						</ul>
						<div>
							<a ng-href="#/panel/step/modify/{{$index}}">{{step.name}}</a>
						</div>
					</td>
					<td>
						<span class="ico-s-delete delete"
							ng-click="deleteStep($index)"
						></span><span class="ico-s-up"
							ng-click="moveStepUp($index)"
						></span><span class="ico-s-down"
							ng-click="moveStepDown($index)"
						></span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div id="toolbar-mask" class="mask" ng-class="{v:isPlaying}"></div>
	<div class="dock bottom h-max" style="z-index:2">
		<hr>
		<div class="row" ng-controller="PlayerBar">
			<div id="player-mask"  class="mask" ng-class="{v:!hasHEAD()}"></div>
			<ul class="toolbar left">
				<li class="button primary ico play"
					title="播放"
					ng-click="play()"
					ng-hide="isPlaying&&status==='play'"
					ng-disabled="!hasHEAD()"></li>
				<li class="button secondary ico pause"
					title="暂停"
					ng-click="pause()"
					ng-show="isPlaying&&status==='play'"
					ng-disabled="!hasHEAD()"></li>
				<li class="button secondary ico stop"
					title="停止"
					ng-click="stop()"
					ng-disabled="!hasHEAD()"></li>
				<li class="button success ico step-by"
				    title="步进"
				    ng-disabled="!hasHEAD() || isPlaying"
				    ng-click="step()"></li>
			</ul>
			<div class="right">
				<input type="number" style="width: 5em" ng-model="iframe.width" min="1" ng-model-options="{ getterSetter: true }"/>
				X
				<input type="number" style="width: 5em" ng-model="iframe.height" min="1" ng-model-options="{ getterSetter: true }"/>
			</div>
		</div>
	</div>
	<!-- /div.bar.dock.bottom.h-max -->
	<span class="handle dock left center" ng-click="togglePanel()"></span>
</div>
<div ui-view="dialog"></div>
